<template>
  <view class="page">
    <view class="group_5">
      <view class="box_2">
        <view class="text-wrapper_4">
          <text lines="1" v-for="(item, index) in tabList" :key="index" class="text_item"
            :class="{ activeNav: indexNav == item.value }" @click="onClickTab(item.value)">{{ item.label }}</text>
        </view>
      </view>

      <view class="list_2">
        <!-- <messageList :list="fastContactList" :type="indexNav == 88 ? '收到联系' : '极速联系'" @init="getContactList"
          @changeList="changeList"></messageList> -->
      </view>
    </view>
  </view>
</template>

<script>
// import messageList from '@/components/messageList/messageList.vue';
export default {
  components: {
    // messageList
  },
  data() {
    return {
      indexNav: 99,
      fastContactList: [],
      contactOfMine: [],
      tabList: [       //顶部状态选择
        {
          label: '全部',
          value: 99
        },
        {
          label: '联系中',
          value: 1
        },
        {
          label: '已同意',
          value: 3
        },
        {
          label: '已拒绝',
          value: -2
        },
        {
          label: '我收到的',
          value: 88
        },
      ],
      PageIndex: 1,
      PageSize: 10,
      isAll: false
    }
  },
  onLoad(e) {
    this.indexNav = e?.tabIndex || 99
    this.getContactList()
  },
  // 触底事件
  onReachBottom() {
    if (!this.isAll) {
      this.PageIndex++;
      this.getContactList()
    }
  },
  methods: {
    changeList(status, index) {
      let listData = this.fastContactList[index]
      listData.Status = status
      this.$set(this.fastContactList, index, listData)
    },
    onClickTab(e) {
      this.indexNav = e
      this.PageIndex = 1
      this.fastContactList = []
      this.getContactList()
    },
    async getContactList() {
      let pageInfo = {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }
      let api = this.indexNav == 88 ? this.$api.post("Friend/MyAccept", { ...pageInfo }) : this.$api.post("Friend/Apply", { Status: this.indexNav, ...pageInfo })
      this.$pv.load('加载中', 0)
      let res = await api
      if (res.code == 0) {
        this.fastContactList = this.PageIndex == 1 ? this.fastContactList = res.data : this.fastContactList.concat(res.data)
        this.isAll = (res.data.length < this.PageSize) ? true : false
      }
      this.$pv.closeLoad();
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: rgba(246, 246, 246, 1.000000);
  display: flex;
  flex-direction: column;
  height: 100vh;

  .group_5 {
    padding-bottom: 34rpx;
    display: flex;
    flex-direction: column;
    padding-top: 54rpx;

    .box_2 {
      background-color: rgba(255, 255, 255, 1.000000);
      display: flex;
      flex-direction: column;
      padding: 0 40rpx;
      padding-top: 24rpx;
      position: fixed;
      top: -5rpx;
      box-sizing: border-box;
      width: 100%;
      z-index: 10;

      .text-wrapper_4 {
        display: flex;
        justify-content: space-between;

        .text_item {
          overflow-wrap: break-word;
          color: #6f6f6f;
          font-size: 28rpx;
          font-family: PingFang-SC-Bold;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 40rpx;
        }

        .activeNav {
          font-weight: bold;
          color: #000000;
        }

        .activeNav::after {
          content: '';
          display: block;
          background-color: rgba(112, 110, 238, 1.000000);
          border-radius: 4rpx;
          width: 48rpx;
          height: 8rpx;
          margin: 0 auto;
          margin-top: 15rpx;
        }
      }
    }

    .list_2 {
      width: 100%;
      margin-top: 40rpx;

      .list-items_1-0 {
        background-color: rgba(255, 255, 255, 1.000000);
        border-radius: 16rpx;
        position: relative;
        margin-bottom: 16rpx;
        display: flex;
        flex-direction: column;
        padding: 24rpx 24rpx 38rpx 22rpx;

        .group_7-0 {
          width: 652rpx;
          align-self: center;
          flex-direction: row;
          display: flex;

          .image-wrapper_1-0 {
            background-color: rgba(216, 216, 216, 1.000000);
            border-radius: 100%;
            border: 1px solid rgba(151, 151, 151, 1);
            display: flex;
            flex-direction: column;

            .label_1-0 {
              width: 88rpx;
              height: 88rpx;
              border-radius: 50%;
            }
          }

          .text-group_2-0 {
            display: flex;
            flex-direction: column;
            margin: 2rpx 0 4rpx 24rpx;

            .text_8-0 {
              overflow-wrap: break-word;
              color: rgba(51, 51, 51, 1);
              font-size: 32rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 44rpx;
              margin-right: 86rpx;
            }

            .text_9-0 {
              overflow-wrap: break-word;
              color: rgba(153, 153, 153, 1);
              font-size: 24rpx;
              font-family: PingFang-SC-Medium;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 34rpx;
              margin-top: 4rpx;
            }
          }

          .text_10-0 {
            width: 96rpx;
            overflow-wrap: break-word;
            font-size: 24rpx;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            white-space: nowrap;
            line-height: 34rpx;
            color: rgba(231, 135, 39, 1);
            position: absolute;
            right: 30rpx;
            text-align: right;
          }
        }

        .text-wrapper_5-0 {
          width: 448rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          margin: 24rpx 206rpx 0 2rpx;

          .text_11-0 {
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 28rpx;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }

          .text_12-0 {
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 28rpx;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }

        .image_3-0 {
          width: 656rpx;
          height: 2rpx;
          margin-top: 30rpx;
          background: #f1f1f1;
        }

        .flexBox {
          display: flex;
          justify-content: space-between;
          align-content: center;
          margin-top: 40rpx;
        }

        .text_15-0 {
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 24rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 34rpx;
        }

        .text-wrapper_3-1 {
          border-radius: 28rpx;
          display: flex;
          padding: 12rpx 32rpx;
          background: rgba(112, 110, 238, 1.000000);
        }

        .text_14-1 {
          overflow-wrap: break-word;
          font-size: 24rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          color: rgba(255, 255, 255, 1);
        }

        .diyCss {
          background: white;
          border: 2rpx solid lightgray;
        }

        .diyColor {
          color: #333333;
        }
      }
    }
  }

  .tel_box {
    background: #FFFFFF;
    border-radius: 24rpx;
    width: 70vw;
    height: 480rpx;
    box-sizing: border-box;
    padding: 24rpx;
    position: relative;

    .tel_close {
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 80%;
        height: 80%;
      }
    }

    .tit {
      font-weight: bold;
      font-size: 32rpx;
      text-align: center;
      color: #0D0D0D;
      padding-bottom: 34rpx;
      border-bottom: 2rpx solid #E4E4E4;
      ;
    }

    .tel_main {
      padding: 16rpx 0;

      .main_cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 50rpx;

        .cell_info {
          display: flex;
          font-size: 28rpx;

          .cell_qr {
            width: 160rpx;
            height: 160rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          text {
            font-size: 28rpx;
            color: #666666;
          }
        }

        .cell_btn {
          font-size: 28rpx;
          color: #706EEE;
          padding: 16rpx;
        }
      }

      .main_cell:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.noneContact {
  margin: 0 auto;
  margin-top: 130rpx;
}
</style>